<template>
  <div>
    <el-row>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="班级名称" style="margin-right: 50px;">
          <el-input v-model="queryForm.name" placeholder="班级名称"></el-input>
        </el-form-item>

        <el-form-item label="任教老师" style="margin-right: 50px;">
          <el-select v-model="queryForm.teacherId" placeholder="请选择">
            <el-option
                v-for="item in teacherOption"
                :key="item.id"
                :label="item.teacherName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属活动" style="margin-right: 50px;">
          <el-select v-model="queryForm.activityId" placeholder="请选择">
            <el-option
                v-for="item in activityOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getListClass(queryForm)">查询</el-button>
          <el-button @click="resetClassQuery">重置</el-button>
          <el-button type="primary" plain @click="openAddClassDialog">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="activityName" label="活动名"/>
        <el-table-column prop="teacherName" label="教师名"/>
        <el-table-column prop="classDesc" label="班级描述"/>
        <el-table-column
          fixed="right"
          label="操作"
          width="270">
          <template slot-scope="scope">
            <div class="btn-grid">
              <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
              <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
              <el-button @click="handleSetTeacher(scope.row)" type="text">分配教师</el-button>
            </div>
            <div class="btn-grid">
              <el-button @click="handleSetActivity(scope.row)" type="text">分配活动</el-button>
              <el-button @click="openAddStu(scope.row)" type="text">添加学员</el-button>
              <el-button @click="openAllStu(scope.row)" type="text">查看学员</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>
    </el-row>



    <!-- 教学班操作弹窗 -->
    <el-dialog :visible.sync="classDialogVisible" width="400px" :title="mode=='edit'?'编辑教学班':'添加教学班'" @closed="cancelDialog">
      <el-form :model="classForm" label-position="left" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="classForm.name"></el-input>
          </el-form-item>
          <el-form-item label="班级描述" prop="classDesc">
            <el-input v-model="classForm.classDesc"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="cancelDialog">取消</el-button>
            <el-button type="primary" @click="confirmSubmitClass(classForm)">确定</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分配弹窗 -->
     <el-dialog :visible.sync="setDialogVisible" width="400px" :title="setTitle" @closed="cancelDialog">
      <el-form :model="classForm" label-position="left" label-width="80px">
        <el-form-item label="任教老师" v-if="setTitle == '分配教师'">
          <el-select v-model="setForm.teacherId" placeholder="请选择">
            <el-option
                v-for="item in teacherOption"
                :key="item.id"
                :label="item.teacherName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属活动" v-else-if="setTitle == '分配活动'">
          <el-select v-model="setForm.activityId" placeholder="请选择">
            <el-option
                v-for="item in activityOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" @click="confirmSetClass(setForm)">确定</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>

     <!-- 添加学生弹窗 -->
    <el-dialog :visible.sync="addStuDialogVisible" width="700px" title="添加学员">
      <el-table 
        :data="addStuTable" 
        height="250"
        ref="multipleTable"  
        tooltip-effect="dark" 
        @selection-change="handleSelectionChange" 
        border 
        style="width: 100%">
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column prop="stuName" label="姓名"/>
        <el-table-column prop="currentGrade" label="年级">
          <template slot-scope="scope">{{ scope.row.currentGrade || '-' }}</template>
        </el-table-column>
        <el-table-column prop="fromPlace" label="籍贯">
          <template slot-scope="scope">{{ scope.row.fromPlace || '-' }}</template>
        </el-table-column>
        <el-table-column prop="parentPhone" label="家长电话">
          <template slot-scope="scope">{{ scope.row.parentPhone || '-' }}</template>
        </el-table-column>
        <el-table-column prop="isFirst" label="是否新生">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.isFirst == '1'">否</el-tag>
            <el-tag v-else>是</el-tag>
          </template>
        </el-table-column>
      
      </el-table>

      <el-row class="check-btns">
        <el-button @click="cancelAddStuDialog">取消</el-button>
        <el-button type="primary" @click="confirmAddStu(addIds)">一键添加</el-button>
      </el-row>
    </el-dialog>

     <!-- 查看本班学生弹窗 -->
    <el-dialog :visible.sync="allStuDialogVisible" width="700px" title="本班学员">
      <el-table 
        :data="allStuTable" 
        max-height="250"
        tooltip-effect="dark" 
        border 
        style="width: 100%">
        <el-table-column prop="stuName" width="120" label="姓名"/>
        <el-table-column prop="currentGrade" label="年级">
          <template slot-scope="scope">{{ scope.row.currentGrade || '-' }}</template>
        </el-table-column>
        <el-table-column prop="fromPlace" label="籍贯">
          <template slot-scope="scope">{{ scope.row.fromPlace || '-' }}</template>
        </el-table-column>
        <el-table-column prop="parentPhone" label="家长电话">
          <template slot-scope="scope">{{ scope.row.parentPhone || '-' }}</template>
        </el-table-column>
        <el-table-column prop="isFirst" label="是否新生">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.isFirst == '1'">否</el-tag>
            <el-tag v-else>是</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handelDelStu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row class="all-stu-btn">
        <el-button @click="cancelAllStuDialog">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { optionActivity } from '@/api/activity';
import { addClass, esitClass, listClass , removeClass , setTeacher , setActivity , addClazzStudents, removeClazzStudent} from '@/api/class';
import { listCheckedStudent, listStudent } from '@/api/student';
import { optionTeacher } from '@/api/teacher';
import { Message, MessageBox } from 'element-ui';
export default {
  data(){
    return{
      mode:'add',
      setTitle:'分配教师',
      curClassId:'',
      currentPage:undefined,
      total:undefined,
      classDialogVisible: false,
      setDialogVisible: false,
      addStuDialogVisible: false,
      allStuDialogVisible: false,
      activityOption:[],
      teacherOption:[],
      multipleSelection: [],
      addIds:[],
      queryForm:{
        name:'',
        pageNum:1,
        pageSize:5
      },
      classForm:{
        activityId:1,
        teacherId:1
      },
      setForm:{
        clazzId:'',
        activityId:'',
        teacherId:''
      },
      addStuForm:{
        clazzId:'',
        studentIds:[]
      },
      allStuForm:{
        pageNum : 1,
        pageSize : 100
      },
      addStuTable:[],
      allStuTable:[],
      tableData:[{
        activityName:'班级1',
        classDesc:'',
        name:'',
        teacherName:''
      }]
    }
  },
  methods:{
    getListClass(){
      listClass(this.queryForm).then(res=>{
        this.tableData = res.row
      }).catch(()=>{})
    },
    getActivityOption(){
      optionActivity().then(res=>{
        this.activityOption = res.data
      }).catch(()=>{})
    },
    getTeacherOption(){
      optionTeacher().then(res=>{
        
        this.teacherOption = res.data
      }).catch(()=>{})
    },
    resetClassQuery(){
      this.queryForm = {
        name:'',
        pageNum:1,
        pageSize:5
      }
      this.getListClass()
    },
    openAddClassDialog(){
      this.mode = 'add'
      this.classDialogVisible = true
    },
    openAddStu(data){
      this.addStuDialogVisible = true
      this.addStuForm.clazzId = data.id
      listCheckedStudent().then(res=>{
        console.log(res);
        this.addStuTable = res.data
      }).catch(()=>{})
    },
    openAllStu(data){
      this.allStuDialogVisible = true
      this.curClassId = data.id
      this.allStuForm = {
        clazzId : data.id,
        pageNum : 1,
        pageSize : 100
      }
      listStudent(this.allStuForm).then(res=>{
        this.allStuTable = res.row
      }).catch(()=>{})
    },
    handleDel(data){
      MessageBox.alert(`确定要删除教学班<${data.name}>吗?`).then(()=>{
        removeClass(data.id).then(res=>{
          Message.success(res.msg)
          this.getListClass()
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handelDelStu(data){
      MessageBox.alert(`确定要删除本班学生<${data.stuName}>吗?`).then(()=>{
        let delStuForm = {
          clazzId: this.curClassId,
          studentId: data.id
        }
        removeClazzStudent(delStuForm).then(res=>{
          Message.success(res.msg)
          listStudent(this.allStuForm).then(res=>{
            this.allStuTable = res.row
          }).catch(()=>{})
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleEdit(data){
      this.mode = 'edit'
      this.classDialogVisible = true
      this.classForm = data
    },
    handleSetTeacher(data){
      this.setTitle = '分配教师'
      this.setDialogVisible = true
      this.setForm.clazzId = data.id
      this.setForm.teacherId = this.teacherOption.find(e=>e.teacherName == data.teacherName).id

    },
    handleSetActivity(data){
      this.setTitle = '分配活动'
      this.setDialogVisible = true
      this.setForm.clazzId = data.id
      this.setForm.activityId = this.activityOption.find(e=>e.name == data.activityName).id
      
    },
    cancelDialog(){
      this.classDialogVisible = false
      this.classForm = {
        activityId:1,
        teacherId:1
      }
      this.setForm = {
        clazzId:'',
        activityId:'',
        teacherId:''
      }
    },
    cancelAllStuDialog(){
      this.allStuDialogVisible = false
      this.allStuTable = []
      this.allStuForm = {
        pageNum : 1,
        pageSize : 100
      }
    },
    confirmSetClass(data){
      if(this.setTitle == '分配教师'){
        setTeacher(data).then(res=>{
          Message.success(res.msg)
          this.setDialogVisible = false
          this.setForm = {
            clazzId:'',
            activityId:'',
            teacherId:''
          }
          this.getListClass()
        }).catch(()=>{})
      }else if(this.setTitle == '分配活动'){
        setActivity(data).then(res=>{
          Message.success(res.msg)
          this.setDialogVisible = false
          this.setForm = {
            clazzId:'',
            activityId:'',
            teacherId:''
          }
          this.getListClass()
        }).catch(()=>{})
      }
    },
    confirmSubmitClass(data){
      if(this.mode == 'add'){
        addClass(data).then(res=>{
          Message.success(res.msg)
          this.classDialogVisible = false
          this.classForm = {
            activityId:1,
            teacherId:1
          }
          this.getListClass()
        }).catch(()=>{})
      }else if(this.mode == 'edit'){
        esitClass(data).then(res=>{
          Message.success(res.msg)
          this.classDialogVisible = false
          this.classForm = {
            activityId:1,
            teacherId:1
          }
          this.getListClass()
        }).catch(()=>{})
      }
    },
    confirmAddStu(){
      this.addIds = this.multipleSelection.map(e=>e.id)
      this.addStuForm.studentIds = this.addIds
      addClazzStudents(this.addStuForm).then(res=>{
        Message.success(res.msg)
        this.addStuDialogVisible =false
        this.addIds = []
        this.multipleSelection = []
        this.addStuTable = []
        this.getListClass()
      }).catch(()=>{})
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
      
    },
    cancelAddStuDialog(){
      this.addStuDialogVisible = false
      this.addIds = []
      this.multipleSelection = []
      this.addStuTable = []

    },
    handleSizeChange(size){
      this.queryForm.pageSize=size
      this.getListClass(this.queryForm)
    },
    handleCurrentChange(page){
      this.queryForm.pageNum=page
      this.getListClass(this.queryForm)
    },
  },
  created(){
    this.getActivityOption()
    this.getTeacherOption()
    this.getListClass()
  }
}
</script>

<style lang="scss">
.btn-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 0 10px;
  .el-button{
    justify-self: left;
  }
}
.all-stu-btn{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
